{extend name="wap/default/base" /}
{block name="resources"}
    <link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/foundation.css">
    
    <link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/common-v4.4.css">
	<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/person-v4.4.css">
	<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/my_order_list.css">
    <script src="__TEMP__/{$style}/public/js/order.js"></script>
	<script type="text/javascript">window.onerror=function(){return true;}</script>
	<script type="text/javascript">
		var CONTROLLER = "APP_MAIN/Orders";
		var APP_MAIN = 'APP_MAIN';
		function backPage(){
			window.location.href="APP_MAIN/member/";
		};
		
	</script>
	<style>
	.express_goods{
		line-height: 23px;
	    padding: 7px;
	    font-size: 12px;
	    color: #666;
		}
		.head {
   		 position: inherit;
		height:auto;
		}
		.cf-tab-item a {
		    width: 19%;
		}
		.cf-container .cf-tab-item.select a{
		color:#707070;
		border-bottom:2px solid rgb(245, 183, 8);
		}
	</style>
{/block}

{block name="goodsHead"}

{/block}
{block name="main"}

    <!--topbar end-->
    <div class="main myorder">
    <section class="head">
    <a class="head_back" id="backoutapp" onclick="window.history.go(-1)" href="javascript:void(0)"><i class="icon-back"></i></a>
		<div class="head-title">已发货订单</div>
		<div class="cf-container" data-reactid="2">
    		<div class="cf-edge" data-reactid="3"></div>
			<ul class="cf-content" data-reactid="4">
				{foreach name="order['goods_packet_list']" item="vo" key=key}
    			<li class="cf-tab-item" data-index="1" data-reactid="7"><a statusid="{$key}" href="javascript:;" >{$vo.packet_name}</a></li>
	    		{/foreach}
	    	</ul>
		</div>
	</section>
    	<!-- 商品列表 -->
    	
	    	{foreach name="order['goods_packet_list']" item="vo" key=k}
	    	<div class="status status-{$key}" data-express-id="{$vo.express_id}" data-is-express="{$vo.is_express}">
	    	<div style="height:80px;line-height:80px;">
		    	{foreach name="vo['order_goods_list']" item="vg"}
		    	<img src="__ROOT__/{$vg['picture_info']['pic_cover_micro']}" style="margin-left: 10px;"/>
		    	{/foreach}
		    </div>
		    {if condition="$vo['is_express'] eq 1"}
		    	<div style="background:#fff;" class="express_goods">
		    		<span>共{$vo['order_goods_list']|count}件商品，由{$vo['express_name']}承运</span><br/>
		    		<span>运单编号：{$vo['express_code']}</span>
		    	</div>
		    	<!-- JS动态查询物流信息 -->
		    	<div style="background:#fff;margin-top:10px;color:rgb(245, 183, 8);font-size:13px;" class="express_goods js-express-info-{$vo.express_id}"></div>
		    	{else}
	    		<div style="background:#fff;" class="express_goods">
		    		<span>共{$vo['order_goods_list']|count}件商品，无需物流</span><br/>
		    		<span>运单编号：--</span>
		    	</div>
		    	<div style="background:#fff;margin-top:10px;color:rgb(245, 183, 8);font-size:13px;" class="express_goods">
		    		<div>物流跟踪：</div>
			    	<div>无物流信息</div>
		    	</div>
	    	{/if}
	    	</div>
	    	{/foreach}
    	
    </div>
 <script>
 	$(function(){
 		$('.cf-container .cf-tab-item').eq(0).click();
 		$("div[data-express-id]").each(function(){
 			var curr = $(this);
 			var express_id = curr.attr("data-express-id");
 			var is_express = curr.attr("data-is-express");
 			if(parseInt(is_express)){
				$('.js-express-info-'+express_id).html("加载中...");
	 			if(express_id != undefined){
		 			$.ajax({
		 	 			type : 'post',
		 				url : "APP_MAIN/order/getordergoodsexpressmessage",
		 				data : {"express_id":express_id},
		 				beforesend : function(){
		 					showLoadMaskLayer();
		 				},
		 				success : function(data){
		 					var html = '<div>物流跟踪：</div>';
		 					if (data['Success'] == true) {
		 						for (var i = 0; i < data["Traces"].length; i++){
		 							html += '<div>'+data["Traces"][i]["AcceptStation"]+'</div>';
		 							html += '<div>'+data["Traces"][i]["AcceptTime"]+'</div>';
		 						}
		 					}else{
		 						html += '<div>无物流信息</div>';	 						
		 					}
		 					$('.js-express-info-'+express_id).html(html);
		 					hiddenLoadMaskLayer();
		 				}
		 	 		});
	 			}
 			}
 		});
 	});
	 $('.cf-container .cf-tab-item').click(function(){
   		$('.cf-container .cf-tab-item').removeClass('select');
   		$(this).addClass('select');
   		//alert($(this).find('a').attr('statusid'));
   		$(".status").hide();
   		$(".status-"+$(this).find('a').attr('statusid')).show();
	  })
 </script>
{/block}
{block name="bottom"}{/block}
